Ext.onReady(function(){
    Ext.QuickTips.init();
 
    // Creamos una variable que contenga nuestro EXT FormPanel.
    // Asignamos varias opciones de configuración.
    var login = new Ext.FormPanel({ 
        labelWidth:80,
        url:'login', 
        frame:true, 
        title:'Por favor, identifíquese', 
        defaultType:'textfield',
	monitorValid:true,
	// Atributo específico para los campos usuario/clave.
	// El atributo "name" defiene el nombre de la variable enviada al servidor. 
        items:[{ 
                fieldLabel:'Usuario', 
                name:'loginUsername', 
                allowBlank:false 
            },{ 
                fieldLabel:'Clave', 
                name:'loginPassword', 
                inputType:'password', 
                allowBlank:false 
            }],
 
    // Toda la mágia ocurre después de que el usuario pulse el botón.
        buttons:[{ 
                text:'Login',
                formBind: true,	 
                // Función que se ejecuta cuando el usuario pulsa el botón.
                handler:function(){ 
                    login.getForm().submit({ 
                        method:'POST', 
                        waitTitle:'Conectando', 
                        waitMsg:'Enviando datos...',
 
            // Función que se ejecuta (éxito o fracaso) cuando el servidor responde.
            // Cual se ejecuta es determinado por la respuesta
            // proveniente de login.asp como se muestra abajo. El servidor responde
            // realmente con un JSON valido, algo como: response.write "{succes: true}"
            // o response.write "{succes: false, errors: { reason: 'Identificación incorrecta. Inténtelo de nuevo.' }}"
            // dependiendo en la lógica contenida en su servidor.
            // Si tiene éxito, se notifica al usuario con un messagebox de alerta,
            // y cuando se pulsa "OK", eres redirigido a cualquier página
            // que haya elegido.
 
                        success:function(form, action){ 
							console.log(arguments);
						    obj = Ext.decode(action.response.responseText)
							
							 
                        	Ext.Msg.alert('Estatus',  obj.msg, function(btn, text){
							   if (btn == 'ok'){
										if(obj.rsp == 'ok'){
											var redirect = '/'; 
											window.location = redirect;	
											
										}else{
											login.query('textfield[name="loginPassword"]')[0].setValue(obj.password)
											login.query('textfield[name="loginUsername"]')[0].setValue(obj.user)
										};
											
									}
								});
                        },
 
			// Función de fallo, see comment above re: éxito y fallo.
			// Como puede ver aquí, si la identificación falla, lanza
			// un mensaje al usuario con los detalles del fallo.
 
                        failure:function(form, action){ 
                            if(action.failureType == 'server'){ 
                                //obj = Ext.util.JSON.decode(action.response.responseText);
                                obj = action.response;  
                                Ext.Msg.alert('Identificación incorrecta', 'Algo Fallo!!!!!'/*obj.errors.reason*/); 
                            }else{ 
                                Ext.Msg.alert('¡Atención!', 'Fallo de conexión con el servidor de autenticación: ' + action.response.responseText); 
                            } 
                            login.getForm().reset(); 
                        } 
                    }); 
                } 
            }] 
    });
 
 
    // Esto sólo crea una ventana para envolver el formulario de registro.
    // El objeto login se pasa a la colección de items.
    var win = new Ext.Window({
        title: 'Iniciar Sesión',
        layout:'fit',
        width:300,
        height:150,
        closable: false,
        resizable: false,
        plain: true,
        border: false,
        items: [login]
	});
	win.show();
});
